<template>
  <div class="container">
    <scroll-view :scroll-y="true"
                 :lower-threshol="150"
                 :style="{'height': '100%'}">
      <div class="section card_section">
        <ul class="card-list clearfix">
          <li class="list-item"
              :class="{
                'super-vip':item.card_type==0||item.card_type==5,
                'project':item.card_type==1,
                'friends':item.card_type==2,
                'partner':item.card_type==3,
                'black-gold':item.card_type==4
                }"
              v-for="(item, index) in card_arr"
              :key="index"
              @tap="card_detail(item)">
            <div class="title">
              <div class="msg">
                {{item.card_type==0||item.card_type==5?'超级会员卡':''}}
                {{item.card_type==1?'项目卡':''}}
                {{item.card_type==2?'亲友卡':''}}
                {{item.card_type==3?'加盟卡':''}}
                {{item.card_type==4?'黑金卡':''}}
              </div>
              <div class="line"></div>
              <div class="logo">
                <img :src="base_url+'/mp_2.4/card/logo.png'"
                     v-if="base_url"
                     mode="widthFix"
                     alt=""
                     class="img">
              </div>
            </div>
            <div class="price">
              <span class="icon">￥</span>
              <span class="num">{{item.price}}</span>
            </div>
          </li>
        </ul>
      </div>
    </scroll-view>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      base_url: common.image_resource,
      img_url: common.image_response,
      card_arr: [],
      ticket_arr: []
    };
  },
  onLoad (options) {
    wx.setNavigationBarTitle({
      title: "卡"
    });

  },
  onShow () {
    this.get_data()
  },
  methods: {
    get_data () {
      common.fly_post('api/v4_5/card_ticket/list', {}, (response) => {
        let res = response.data
        if (res.status_code == 0) {
          this.card_arr = res.data.card
          res.data.ticket.forEach(item => {
            item.start = new Date(item.send_start_time * 1000).Format('yyyy.MM.dd')
            item.end = new Date(item.send_end_time * 1000).Format('yyyy.MM.dd')
          });
          this.ticket_arr = res.data.ticket
        }

      })
    },
    card_detail (item) {
      wx.navigateTo({ url: `/pages/package_mine/card_detail/main?id=${item.id}` });
    },
    use_ticket (item) {
      //   condition 1--项目 2--商品
      if (item.jump_link != '') {
        let json_data = JSON.parse(item.jump_link) || {}
        switch (json_data.type) {
          case 1:
            // 跳转分类
            switch (item.condtion) {
              case 1:
                wx.navigateTo({ url: '/pages/package_projects/categorize_list/main' });
                break;
              case 2:
                wx.navigateTo({ url: `/pages/package_projects/shop_type/main` });
                break;

              default:
                break;
            }
            break;
          case 2:
            // 跳转二级分类（只有商品有）
            wx.navigateTo({ url: `/pages/package_projects/shop_type_detail/main?id=${json_data.id}&type=2` });
            break;
          case 3:
            //  跳转指定项目或商品
            switch (item.condtion) {
              case 1:
                wx.navigateTo({ url: '/pages/package_projects/project_detail/main?id=' + json_data.id });
                break;
              case 2:
                wx.navigateTo({ url: `/pages/package_mall/goods_detail/main?goods_id=` + json_data.id });
                break;
              default:
                break;
            }
            break;

          default:
            // 没有这个字段就默认跳转首页
            if (item.condtion == 1) {
              wx.switchTab({ url: '/pages/beauty_mall/main' });
            } else if (item.condtion == 2) {
              wx.reLaunch({ url: "/pages/shop_mall/main" });
            }
            break;
        }
      } else {        if (item.condtion == 1) {
          wx.switchTab({ url: '/pages/beauty_mall/main' });
        } else if (item.condtion == 2) {
          wx.reLaunch({ url: "/pages/shop_mall/main" });
        }
      }
    },
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: rgba(243, 244, 246, 1);
  .notice {
    height: 40px;
    background: rgba(255, 223, 223, 1);
    padding-left: 15px;
    .icon {
      display: inline-block;
      vertical-align: middle;
      width: 16px;
      margin-right: 5px;
      .img {
        width: 100%;
        display: block;
      }
    }
    .msg {
      display: inline-block;
      vertical-align: middle;
      font-size: 13px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 40px;
    }
  }
  .top {
    height: 40px;
    line-height: 40px;
    padding-right: 15px;
    .disabled {
      float: right;
      font-size: 14px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
  }
  .section {
    background-color: #fff;
    margin-bottom: 10px;
    padding: 0 15px;
    padding-top: 20px;
    margin-top: 1px;
    .header {
      height: 60px;
      width: 100%;
      .left {
        float: left;
        .icon {
          width: 25px;
          height: 20px;
          display: inline-block;
          vertical-align: middle;
          .img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
        .msg {
          display: inline-block;
          vertical-align: middle;
          line-height: 60px;
          font-size: 14px;
          margin-left: 5px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
        }
      }
      .right {
        float: right;
        font-size: 14px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 60px;
      }
    }
  }
  .card_section {
    .card-list {
      .list-item {
        height: 100px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: relative;
        margin-bottom: 10px;
        .title {
          position: absolute;
          top: 15px;
          left: 15px;
          .msg {
            font-size: 22px;
            font-family: "PingFangSC-Medium";
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            display: inline-block;
            vertical-align: middle;
          }
          .line {
            width: 1px;
            height: 18px;
            background: rgba(255, 255, 255, 1);
            opacity: 0.6022;
            display: inline-block;
            vertical-align: middle;
            margin: 0 10px;
          }
          .logo {
            width: 67px;
            display: inline-block;
            vertical-align: middle;
            .img {
              width: 100%;
            }
          }
        }
        .price {
          position: absolute;
          bottom: 10px;
          left: 15px;
          .icon {
            font-size: 17px;
            font-family: "PingFangSC-Medium";
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            vertical-align: bottom;
            display: inline-block;
          }
          .num {
            font-size: 25px;
            font-family: "PingFangSC-Medium";
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            vertical-align: bottom;
            display: inline-block;
            line-height: 30px;
            margin-left: -1px;
          }
        }
        &:last-of-type {
          margin-bottom: 20px;
        }
      }
      //   项目卡
      .project {
        background-image: url(https://h5.ameimeika.com/mp_images/mp_2.4/card/xiangmuxiao.png);
      }
      //   亲友卡
      .friends {
        background-image: url(https://h5.ameimeika.com/mp_images/mp_2.4/card/qinyouxiao.png);
      }
      //   加盟卡
      .partner {
        background-image: url(https://h5.ameimeika.com/mp_images/mp_2.4/card/jiamengxiao.png);
      }
      //   超级会员卡
      .super-vip {
        background-image: url(https://h5.ameimeika.com/mp_images/mp_2.4/card/chaoji小.png);
      }
      //   黑金卡
      .black-gold {
        background-image: url(https://h5.ameimeika.com/mp_images/mp_2.4/card/heijxiao.png);
        .title {
          .msg {
            font-size: 22px;
            font-family: "PingFangSC-Medium";
            font-weight: 500;
            color: rgba(219, 177, 120, 1);
            display: inline-block;
            vertical-align: middle;
          }
        }
      }
    }
  }
  .ticket-section {
    .ticket-list {
      .list-item {
        display: flex;
        width: 100%;
        height: 94px;
        box-sizing: border-box;
        margin-bottom: 12px;
        .left-detail {
          flex: 1;
          height: 100%;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.17);
          border-radius: 8px 0 0 8px;
          overflow-y: hidden;
          display: flex;
          padding: 13px 0 14px;
          box-sizing: border-box;
          .left {
            width: 40%;
            height: 100%;
            border-right: 1px dashed #ccc;
            position: relative;
            .price {
              font-size: 26px;
              font-family: "Medium";
              font-weight: 500;
              color: rgba(255, 56, 62, 1);
              text-align: center;
              line-height: 28px;
              margin-top: 10px;
            }
            .tip {
              font-size: 12px;
              font-family: "PingFangSC-Regular";
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
              text-align: center;
            }
            .special {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              .tip-t,
              .tip-b {
                font-size: 14px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: rgba(255, 56, 62, 1);
                line-height: 20px;
                text-align: center;
              }
            }
          }
          .right {
            flex: 1;
            height: 67px;
            padding-left: 12px;
            .name {
              width: 100%;
              box-sizing: border-box;
              overflow: hidden;
              margin-bottom: 4px;
              .type {
                float: left;
                // display: inline-block;
                padding: 0 6px;
                height: 18px;
                line-height: 18px;
                text-align: center;
                background: rgba(254, 106, 156, 1);
                border-radius: 11px;
                font-size: 8px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                vertical-align: middle;
              }
              .ticket-name {
                float: left;
                font-size: 12px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                line-height: 18px;
                margin-left: 5px;
                // display: inline-block;
                vertical-align: middle;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
              }
            }
            .descript {
              height: 28px;
              min-width: 140px;
              font-size: 10px;
              font-family: "PingFangSC-Regular";
              font-weight: 400;
              line-height: 14px;
              color: rgba(102, 102, 102, 1);
              .tip {
                color: #ff383e;
              }
            }
            .date {
              font-size: 10px;
              margin-top: 4px;
              font-family: "PingFangSC-Regular";
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
            }
          }
        }
        .right-btn {
          width: 56px;
          height: 94px;
          position: relative;
          background: rgba(254, 106, 156, 1);
          box-shadow: 3px 2px 8px 0px rgba(0, 0, 0, 0.17);
          border-radius: 0 8px 8px 0;

          .msg {
            font-size: 12px;
            font-family: "PingFangSC-Medium";
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
          .icon {
            height: 100%;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            padding: 20px 0;
            .circle {
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background-color: rgba(243, 244, 246, 1);
            }
          }
          &::before {
            content: "";
            width: 16px;
            height: 16px;
            display: block;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
            transform: translate(-50%, -50%);
            background-color: #fff;
            z-index: 20;
          }
          &::after {
            content: "";
            width: 16px;
            height: 16px;
            display: block;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
            left: 0;
            transform: translate(-50%, 50%);
            background-color: #fff;
            z-index: 20;
          }
        }
        &:last-of-type {
          margin-bottom: 20px;
        }
      }
    }
  }
}
</style>


